<template>
  <div class="node-wrap" :class="[className,'base',nodeClassName]">
    <div class="node-title" @mousedown="handleMouseDown" @mouseup="handleMouseUp">
      <span class="node-icon">

      </span>
      <span class="node-name">{{ nodeName }}
      </span>
    </div>
  </div>
</template>
<script setup>

import {EDITOR_EVENT} from "@/components/logic-editor/constant";
import {isMoved, syncPosition} from "@/components/logic-editor/nodes/Base/useBaseNode.js";

defineOptions({
  name: 'BaseNodeVue'
})
const props = defineProps({
  model: Object,
  graph: Object,
  graphModel: Object,
  disabled: Boolean,
  isSelected: Boolean,
  isHovered: Boolean,
  properties: Object
})
//上次节点位置
const lastPosition = {
  x: props.model.x,
  y: props.model.y
}
const selectedNode = ref(null)

let mousedownStartTime = 0
watch(() => props.isHovered, (newVal) => {
  // console.log('hovered', newVal)
  if (newVal) {
  }
})

onMounted(() => {
  // console.log('mounted', props.isHovered)
})
const className = computed(() => {
  const classArr = []
  props.isSelected ? classArr.push('selected') : classArr.splice(classArr.indexOf('selected'), 1)
  return classArr.join(' ')
})
const nodeClassName = computed(() => {
  return props.model.getNodeClassName?.() ?? ''
})

const nodeName = computed(() => {
  console.log('basenode,nodeName', props.model.getNodeName(), props.properties.name)
  console.log(props.model)
  return props.model.getNodeName() ?? ''
})

const handleMouseDown = () => {
  // console.log('handleMouseDown');
  mousedownStartTime = new Date().getTime()
}
const handleMouseUp = () => {
  const mousedownDuration = new Date().getTime() - mousedownStartTime
  // 非拖拽才显示抽屉
  if (mousedownDuration < 1000 && !isMoved(lastPosition, props.model)) {
    // console.log('handleMouseUp');
    if (props.isSelected) {
      emitEvent(EDITOR_EVENT.LOGIC_NODE_MOUSE_UP)
    }
  }
  syncPosition(lastPosition, props.model)
}
const emitEvent = (event) => {
  props.graphModel.eventCenter.emit(event, props.model)
}

</script>

<style scoped lang="scss">
.base {
  --node-primary-color: #2961ef;
}

.event {
  --node-primary-color: #683ced;
}

.request {
  --node-primary-color: #26c9f2;
}

.node-wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: move;
  user-select: none;
  // transition: 0.3 all ease;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #1f3252;
  line-height: 16px;
  font-weight: 400;
  padding: 5px;
  // overflow: hidden;
  &.hovered {
    .node-title {
      background: rgba(41, 97, 239, 0.08);
      border: 1px solid var(--node-primary-color);
    }
  }

  &.selected {
    .node-title {
      border: 2px solid var(--node-primary-color);
      box-shadow: 0 0 5px 0 rgba(41, 97, 239, 0.5);
    }
  }

  &.execute-failed {
    .node-title {
      border: 2px solid rgba(255, 77, 79, 0.7);
      box-shadow: 0 0 6px 0 rgba(255, 77, 79, 0.5);
      background: rgba(255, 77, 79, 0.5);
    }
  }
}

.node-title {
  height: 26px;
  display: inline-flex;
  align-items: center;
  width: 100%;
  border: 1px solid #bac1d0;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;

  .node-icon {
    width: 26px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--node-primary-color);
  }

  img {
    width: 14px;
    height: 14px;
    filter: drop-shadow(#fff 100px 0);
    transform: translateX(-100px);
  }
}

.executed {
  .node-title {
    background: rgb(79 235 151 / 80%);
  }
}

.node-name {
  width: 90px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 8px;
}

.option-icon {
  display: inline-block;
  margin-left: 4px;
  width: 14px;
  height: 14px;
  overflow: hidden;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }

  &:hover,
  &:focus {
    img {
      filter: drop-shadow(var(--node-primary-color) 100px 0);
      transform: translateX(-100px);
    }
  }
}

.next-icon {
  color: #33dd89;
  font-size: 16px;
  cursor: pointer;
}

.node-option {
  display: flex;
  position: absolute;
  right: 0;
  top: calc(50% - 14px);
  transform: translateY(-100%);

  .item {
    cursor: pointer;
    height: 14px;
  }
}

.node-warning {
  display: flex;
  position: absolute;
  left: 0;
  top: calc(50% - 14px);
  transform: translateY(-100%);

  .item {
    cursor: pointer;
    height: 14px;
    color: orange;
    font-weight: bold;
    font-size: 12px;
  }
}

.warning-tip {
  font-size: 12px;
  color: #f00;
  margin-left: 4px;
}

.node-next {
  display: flex;
  position: absolute;
  left: 90px;
  top: 13px;
  width: 24px;
  height: 28px;
  align-items: center;

  span {
    width: 16px;
    height: 16px;
    background: #fff;
    margin-left: 13px;
    margin-right: 2px;
    display: flex;
    align-items: center;
  }

  .next-icon {
    width: 16px;
    height: 16px;
  }
}
</style>
